import {
  Form,
  Slider,
  Divider,
  Select,
  Upload,
  Radio,
  Button,
  Spin,
} from 'antd';
import { FolderUp } from 'lucide-react';
import { WEB_BASE_INFO } from '@/state/common';
import { useState } from 'react';
import type { UploadFile, UploadProps } from 'antd';
import UploadShow from '../../../User/Resume/Uploading/UploadShow';

interface ConditionBarProps {
  isInterviewing: boolean;
  handleCreateInterview: (data: {
    hc: string;
    pdf_url: string;
    question_num?: number;
    level?: number;
  }) => void;
}

interface customFile extends UploadFile {
  File: File;
  id: number;
  folderId: string;
}

const { Dragger } = Upload;

export function ConditionBar({
  isInterviewing,
  handleCreateInterview,
}: ConditionBarProps) {
  const [form] = Form.useForm();
  const [isLoading, setIsLoading] = useState(false);
  const reviewJobs = [
    {
      label: '前端开发实习生',
      value: '前端开发实习生',
    },
    {
      label: '后端开发实习生',
      value: '后端开发实习生',
    },
    {
      label: '测试实习生',
      value: '测试实习生',
    },
    {
      label: '产品经理实习生',
      value: '产品经理实习生',
    },
    {
      label: 'UI设计实习生',
      value: 'UI设计实习生',
    },
    {
      label: '运维开发实习生',
      value: '运维开发实习生',
    },
  ];
  const [fileList, setFileList] = useState<customFile[]>([]);
  const [filesToUpload, setFilesToUpload] = useState<customFile[]>([]);
  const onFinish = async (values) => {
    const data = {
      hc: values.hc[0],
      pdf_url: fileList[0].url as string,
      question_num: values.question_num,
      level: values.level,
    };
    handleCreateInterview(data);
  };

  const uploadProps: UploadProps = {
    name: 'moce_interview_resume',
    multiple: false,
    accept: '.pdf,.doc,.docx', // 限制文件选择类型
    onChange({ fileList }) {
      setIsLoading(true);
      fileList.forEach((file) => {
        if (file.status === 'removed') {
          setFileList((prev) => prev.filter((item) => item.uid !== file.uid));
          setIsLoading(false);
          return;
        }
        setFileList((prev) => [...prev, file as any]);
        setFilesToUpload((prev) => [
          ...prev,
          {
            ...file,
            id: new Date().getTime(),
            folderId: '-1',
            File: file.originFileObj as File,
          },
        ]);
      });

      console.log(fileList);
    },
    beforeUpload: () => {
      return false; // 阻止所有文件的自动上传
    },
    onDrop(e) {
      e.preventDefault(); // 阻止默认上传
    },
    fileList,
  };

  const handleFileUploaded = (url: string, name: string, originFile) => {
    setFileList((prev) =>
      prev.map((file) => {
        if (file.name === name) {
          return { ...file, ...originFile, url, folderId: '-1' };
        }
        return file;
      })
    );
    setIsLoading(false);
    console.log(fileList);
  };
  const removeUnUploadFile = (id: number) => {
    setFilesToUpload((prev) => prev.filter((item) => item.id !== id));
  };
  return (
    <div className="h-full w-full overflow-y-scroll bg-white p-4">
      <Spin spinning={isLoading}>
        <h1 className="mb-6 flex items-center text-lg font-bold">
          {isInterviewing ? (
            <img className="mr-2 w-12" src={WEB_BASE_INFO.LOGO} alt="logo" />
          ) : (
            '智能面试助手'
          )}
        </h1>
        <Form
          layout={'vertical'}
          form={form}
          initialValues={{
            hc: [reviewJobs[0].value],
            question_num: 15,
            level: 1,
          }}
          onFinish={onFinish}
        >
          <Form.Item label="面试岗位" name="hc" rules={[{ required: true }]}>
            <Select mode="tags" maxTagCount={1} options={reviewJobs}></Select>
          </Form.Item>
          <Form.Item
            label="上传简历"
            name="resume"
            rules={[{ required: true }]}
          >
            <Dragger {...uploadProps} style={{ color: '#888' }}>
              <FolderUp style={{ margin: '0 auto' }} />
              <p className="mt-1">点击或拖拽文件到此处上传</p>
              <p className="mt-1 text-xs">支持PDF、Word格式文件</p>
            </Dragger>
          </Form.Item>
          <Divider plain>面试设置</Divider>
          <Form.Item
            label="问题数量"
            name="question_num"
            extra={'1-20之间的整数'}
          >
            <Slider min={1} max={20} />
          </Form.Item>
          <Form.Item label="问题难度" name="level">
            <Radio.Group
              style={{ width: '100%' }}
              size="large"
              buttonStyle="solid"
            >
              <Radio.Button value={1}>简单</Radio.Button>
              <Radio.Button value={2}>中等</Radio.Button>
              <Radio.Button value={3}>困难</Radio.Button>
            </Radio.Group>
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              block
              size="large"
              htmlType="submit"
              loading={isLoading}
              disabled={isInterviewing}
            >
              {isInterviewing ? '面试中' : '开始面试'}
            </Button>
          </Form.Item>
        </Form>

        <UploadShow
          files={filesToUpload}
          remove={removeUnUploadFile}
          reSeturl={handleFileUploaded}
        />
      </Spin>
    </div>
  );
}
